<template>
	<view class="">
		<view class="collapse-box"
			v-if="list.status ==2&&list.stages||list.status == 3&&list.stages||list.status == 4&&list.stages||list.status ==5&&list.stages">
			<!-- {{item.body}} -->
			<view class="" style="margin-bottom: 20rpx;">
				我的分期账单
			</view>
			<view class="byStages">
				<view class="byStages-item" @click.stop="selectstages(stage)" v-for="(stage,index) in list.stages"
					:key="stage.id">
					<view class="byStages-item-left">
						<image :src="$BASE_URL + picList[0]" mode="aspectFill" style="height: 40rpx;width: 40rpx;"
							v-if="selectList.includes(stage.id) &&stage.order_status == 1"></image>
						<image :src="$BASE_URL + picList[8]" mode="aspectFill" style="height: 40rpx;width: 40rpx;"
							v-if='!selectList.includes(stage.id) &&stage.order_status == 1'></image>
						<image :src="$BASE_URL + picList[3]" mode="aspectFill" style="height: 40rpx;width: 40rpx;"
							v-if='stage.order_status == 2'></image>
						<text>{{stage.number}}/{{stage.end_number}}期</text>
						<image :src="$BASE_URL + picList[2]" mode="aspectFill" style="height: 24rpx;width: 24rpx;">
						</image>
						<text>{{stage.pedding_money}}元</text>
					</view>
					<view class="byStages-item-right">
						{{stage.order_status ==2 ?'已结清':stage.order_status == 1&&stage.order_status == 2 ?"已逾期请结清账单":stage.day}}
					</view>
				</view>
			</view>
			<!-- 	<view class="payMoney" @click="payMoney(order.order_sn)">
						支付租金
					</view> 
			-->
		</view>
			
				<view class="three-btn" v-if="list.status == 5">
		<!-- 	<view class="three-btn-item">
				续租
			</view> -->
			<view class="three-btn-item three-btn-item-red" @click="buyout()">
				买断
			</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		props: {
			idd: {
				type: String,
				default: '',
				required: true
			},
			list: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				itemList: [{
					head: "分期账单详情",
					body: "",
					open: true,
					disabled: true
				}],
				picList: [],
				selectList: [], // 选中的数组
				order: {},
				id: ''
			}
		},
		created() {
			this.getpic()
		},
		mounted() {
			// console.log(this.idd);
			// this.getOrderDetail()


		},
		watch: {
			// list.stages:{
			// 	handler(){
			// 		console.log(this.idd);
			// 		this.selectList = []
			// 		// this.id = 
			// 		// this.getOrderDetail(this.idd)
			// 	},
			// 	deep:true
			// }
		},
		onLoad(e) {
			console.log(22222);
		},
		methods: {
			// 立即买断
			buyout() {
				uni.showLoading({
					title:'加载中'
				})
				this.$http('order.buyout', {
					order_sn: this.list.order_sn
				}).then(res => {
					console.log('买断成功',res.data);
					if (res.code == 1) {
						
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
							tradeNO: res.data.result.body.trade_no,
							success: (res) => {
								uni.hideLoading()
								this.$emit('replaceNew')
						
							},
							fail: (res) => {
								uni.hideLoading()
							}
						});
						
						
					}
				})
			},
			// 
			selectstages(stage) {
				// console.log('选择分期');

				if (stage.order_status == 2) return
				if (this.selectList.includes(stage.id)) {
					this.selectList.splice(this.selectList.indexOf(stage.id), 1)

				} else {

					this.selectList.push(stage.id)
				}
				this.$emit('subperiods', this.selectList)



			},

			getOrderDetail(id) {
				console.log(id);
				this.$http('order.detail', {
					id
				}).then(res => {
					if (res.code == 1) {
						console.log(res, 'res');
						this.order = res.data;

					}
				});
			},

			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						console.log(res);
						this.picList = res.data.result.selectIcon

					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.three-btn {
		width: 710rpx;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		margin: 0 auto;
		border-radius: 20rpx;

		.three-btn-item {
			font-size: 26rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0rpx 40rpx;
			border: 2rpx solid gainsboro;
			border-radius: 60rpx;
			margin-right: 20rpx;
		}

		.three-btn-item:active {
			background-color: gainsboro;
			color: #333;
		}

		// style="color: #FF4747;border-color: #FF4747;"
		.three-btn-item-red {
			border: 2rpx solid #FF4747;
			color: #FF4747;
		}

		.three-btn-item-red:active {
			background-color: #FF4747;
			color: #fff;
		}
	}

	.collapse-box {
		width: 710rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		// /deep/ .u-collapse-body {
		// 	height: 100% !important;
		// }

		.byStages {
			width: 100%;
			// height: 300rpx;
			background-color: #FAFAFA;
			border-radius: 20rpx;
			padding: 20rpx 0;

			.byStages-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				// margin-bottom: 40rpx;
			}

			.byStages-item-left {
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 60%;
			}

			.byStages-item-right {
				width: 30%;
			}
		}

		.payMoney {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 80%;
			border-radius: 44rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FF4747;
			font-size: 32rpx;
			font-weight: 500;
			border: 2rpx solid #FF4747;
		}

		.payMoney:active {
			background-color: #FF4747;
			color: #FAFAFA;
		}
	}
</style>
